<template>
  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
        <Select v-model="model1" style="width:200px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <DatePicker type="daterange" :options="Dateoptions" placement="bottom-start" placeholder="生产日期"
                    style="width: 200px" @on-change="getDate"></DatePicker>
        <Select v-model="model6" style="width:100px" placeholder="状态">
          <Option value="normal">正常</Option>
          <Option value="abnormal">异常</Option>
        </Select>
        <Button type="primary" icon="ios-search" >搜索</Button>
      </div>

      <Table border :columns="columnsTest" :data="data1"></Table>
    </Card>
    </Row>


  </div>
</template>
<style scoped>

</style>
<script type="text/ecmascript-6">

  export default {
    beforeMount () {

    },
    mounted() {
this.columnsPut(['2017-10-1','2017-10-2']);
    },
    data () {
      return {
        Dateoptions: {
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ],
        },
        cityList: [
          {
            value: 'inside',
            label: '内部巡检记录'
          },
          {
            value: 'outside',
            label: '第三方巡检记录'
          }
        ],
        model1:'',
//        columns1: [
//          {
//            title: '班次',
//            key: 'order'
//          },
//          {
//            title: '2017-10-1',
//            key: 'name1'
//          },
//          {
//            title: '2017-10-2',
//            key: 'name2'
//          },
//          {
//            title: '2017-10-3',
//            key: 'name3'
//          },
//          {
//            title: '2017-10-4',
//            key: 'name4'
//          },
//          {
//            title: '2017-10-5',
//            key: 'name1'
//          },
//          {
//            title: '2017-10-6',
//            key: 'name5'
//          },
//          {
//            title: '2017-10-7',
//            key: 'name6'
//          }
//        ],
//        data1: [
//          {
//            order: '白班',
//            name1: '正常',
//            name2: '正常',
//            name3: '正常',
//            name4: '正常',
//            name5: '正常',
//            name6: '正常',
//          },
//          {
//            order: '夜班',
//            name1: '正常',
//            name2: '正常',
//            name3: '正常',
//            name4: '正常',
//            name5: '正常',
//            name6: '正常',
//          }
//        ],
        model6:'',
        columnsTest:[],
        timeRange:['2017-10-1','2017-10-2'],
        status:'正常',
        data1:[]
      }
    },
    methods: {
      getDate(num){
        console.log(num);
        this.timeRange = num;
      },
      columnsPut(time){
         this.columnsTest.push(
           {
             title:'班次',
             key:'order',
           },
           {
            title:time[0],
            key: 'action',
            width: 140,
            align: 'center',
           render: (h, params) => {
             console.log(JSON.stringify(params));
             console.log(h);

               return h('div', [
                 h('Button', {
                   props: {
                     type: 'primary',
                     size: 'small'
                   },
                   style: {
                     marginRight: '5px'
                   },
                   on: {
                     click: () => {
                       console.log(JSON.stringify(params));
                     }
                   }
                 }, '查看'),
               ]);

           }
          });
console.log(JSON.stringify(this.columnsTest));
      },

    }//m

  };
</script>
